<template>
  <!-- 门户页公告列表 -->
  <main class="main">
    <header>
      <div class="position">
        <div class="logo-wrap">
          <div class="logo">
            <img src="@/assets/logo.png" alt>
            <div>
              <span>工程监管系统</span>
              <span>Project supervision</span>
            </div>
          </div>
          <!--          <CityPositioning class="city" />-->
        </div>
      </div>
    </header>
    <div class="bg-image" :style="{backgroundImage: `url(${noticeBanner})`}">
      <!-- <img src="" alt> -->
    </div>
    <div class="app-container">
      <!-- 顶部表单部分 -->
      <div style="padding:0" class="form-container">
        <el-form ref="formNotice" :model="filters" :inline="true" label-width="80px">
          <el-form-item label="公告标题" prop="noticeTitle">
            <el-input
              v-model="filters.noticeTitle"
              placeholder="请输入公告标题"
              clearable
              size="small"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-button v-clickForbidden style="margin-top:5px;" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form>
        <el-table
          ref="multipleTable"
          :row-style="rowClass"
          height="625px"
          class="table-list"
          stripe
          :data="noticeList"
          @selection-change="handleSelectionChange"
          @row-click="rowChecked"
        >
          <el-table-column type="selection" width="38" align="center" />
          <el-table-column label="序号" align="center" type="index" width="60" />
          <el-table-column label="公告标题" align="center" min-width="200" prop="noticeTitle" :show-overflow-tooltip="true">
            <template slot-scope="{row}">
              <a href="javascript:;" class="link-type" @click.stop="handleDetail(row)">
                <span>{{ row.noticeTitle }}</span>
              </a>
            </template>
          </el-table-column>
          <el-table-column label="创建者" align="center" prop="createName" min-width="80" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
        </el-table>
        <pagination
          :total="total"
          :page.sync="filters.pageNum"
          :limit.sync="filters.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </main>
</template>

<script>
import noticeBanner from '@/assets/noticeBanner.jpg'
import { noticeNoList } from '@/api/home'
// import CityPositioning from '@/components/CityPositioning'
import { mapState } from 'vuex'
export default {
  name: 'NoticeList',
  components: {
    // CityPositioning
  },
  data() {
    return {
      noticeBanner,
      typeOptions: [],
      statusOptions: [],
      isAmend: true,
      selectRow: [],
      // 高级设置显示隐藏
      highLevelSet: false,
      // 表格数据
      noticeList: [],
      // 选中的行对象
      multipleSelection: [],
      // 顶部表单数据
      filters: {
        pageNum: 1,
        pageSize: 20,
        noticeTitle: ''
      },
      loading: false, // 列表加载
      total: 0 // 分页总条数
    }
  },
  computed: {
    ...mapState({
      needTagsView: state => state.settings.tagsView
    })
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleDetail(row) {
      this.$router.push({ path: '/noticeDetail', query: { id: row.noticeId }})
    },
    // 获取列表数据
    async getList() {
      const { data: { rows, total }} = await noticeNoList(this.filters)
      this.noticeList = rows
      this.total = total
      this.addTaleData()
    },
    // 填充空白行
    addTaleData() {
      if (this.noticeList.length < 20) {
        const arr = {}
        this.noticeList.push(arr)
        this.addTaleData()
      }
    },
    // 单击每行时每行的复选框选中
    rowChecked(row) {
      const selectData = this.multipleSelection
      this.$refs.multipleTable.clearSelection()
      if (selectData.length === 1) {
        selectData.forEach((item) => {
          // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
          if (item === row) {
            this.$refs.multipleTable.toggleRowSelection(row, false)
          } else {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          }
        })
      } else {
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },
    // 复选框选择
    // 点击表格前面选框时触发的事件
    handleSelectionChange(val) {
      if (JSON.stringify(val[0]) === '{}') {
        this.$refs.multipleTable.clearSelection()
        val = []
      }
      this.isAmend = val.length !== 1
      this.selectRow = []
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((item, index) => {
          this.selectRow.push(this.noticeList.indexOf(item))
        })
      }
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val.pop())
      }
    },
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    // 搜索按钮操作
    handleQuery() {
      this.getList()
    }
  }
}
</script>

